<template>
  <!--评论列表-->
  <div>
    <CommentForm v-if="parentCommentId === -1" />
    <h3 class="ui dividing header">
      Comments | 共 {{ allComment }} 条评论<span v-if="closeComment !== 0"
        >（{{ closeComment }} 条评论被隐藏）</span
      >
    </h3>
    <h3 class="ui header" v-if="allComment === 0">快来抢沙发！</h3>
    <CommentTree :data="comments"></CommentTree>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import CommentForm from './CommentForm'
import CommentTree from '@/components/comment/CommentTree'

export default {
  name: 'Comment',
  components: { CommentForm, CommentTree },
  computed: {
    ...mapState({
      allComment: state => state.comment.allComment,
      closeComment: state => state.comment.closeComment,
      comments: state => state.comment.comments,
      parentCommentId: state => state.comment.parentCommentId
    })
  },
  methods: {}
}
</script>

<style scoped>
.comments + .border {
  position: absolute;
  left: 34px;
  top: 47px;
  bottom: 0;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: #e0e0e0;
}

.ui.threaded.comments .comment .comments {
  box-shadow: none;
  margin-top: -2em;
}

.comment {
  padding-right: 2em !important;
  padding-left: 1em !important;
}

.nickname {
  font-weight: bolder;
  color: #000;
}

.comment .el-button {
  margin-left: 5px;
  padding: 4px 5px;
}

.comment > .anchor {
  position: absolute;
  left: 0;
  top: -48px;
}

.comment .comments .comment > .anchor {
  top: -55px;
}

.ui.comments .comment .avatar {
  width: 40px !important;
  margin: 0;
}

.ui.comments .comment .text {
  white-space: pre-wrap !important;
  margin-top: 7px;
  line-height: 1.5;
}

.ui.comments .comment .text a {
  cursor: pointer;
  margin-right: 8px;
  font-weight: bolder;
  color: rgba(0, 0, 0, 0.87);
}

.ui.comments .comment .text div {
  display: inline;
}

.label {
  cursor: default;
  padding: 4px 6px !important;
  font-weight: 500 !important;
}

.comment .form {
  margin-top: 20px;
}
</style>
